<template>
	<view class="contain" @tap="tap" @longtap="longtap" @touchmove="touchmove">
		<notify></notify>
		<classify-card ref="hbhCard"></classify-card>
		<!-- 悬浮按钮 -->
		<view v-show="elfFlag" class="fixedBtn" :style="{top:btnTop+'px',left:btnLeft+'px'}"
			@touchmove="touchmoveBtn" @touchend="touchendBtn">
			<image src="/static/image/homeImage/service.png" mode=""></image>
			<text>小缘助手</text>
			<view class="closeBox" :style="{right:elfRight+'px'}" @click="closeElf">

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [{
					src: "https://img1.baidu.com/it/u=1083834287,344119547&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=309",
				}, {
					src: "https://img2.baidu.com/it/u=2881245921,4175357114&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
				}, {
					src: "https://img0.baidu.com/it/u=2174595347,3149152354&fm=253&fmt=auto&app=138&f=JPEG?w=1038&h=500",
				}, {
					src: "https://img2.baidu.com/it/u=2187984685,727239354&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
				}],
				curr: 0,
				btnTop: 0,
				btnLeft: 0,
				clientWidth: 0,
				clientHeight: 0,
				hbhCard: null,
				elfFlag: false,
				elfRight: 0
			}
		},
		created() {
			let res = uni.getSystemInfoSync()
			this.clientWidth = res.windowWidth
			this.clientHeight = res.windowHeight
			this.btnTop = res.windowHeight / 2 + 80
			this.btnLeft = res.windowWidth - 60
			this.$nextTick(() => {
				this.hbhCard = this.$refs.hbhCard
			})
		},
		methods: {
			closeElf() {
				uni.showActionSheet({
					itemList: ['隐藏小缘助手'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								this.elfFlag = false
								uni.showToast({
									icon: "none",
									title: "已隐藏小缘助手，可在我的-设置开启"
								})
								setTimeout(() => {
									this.elfFlag = true
								}, 4000)
								break;
							default:
						}
					}
				});

			},
			offShow(val) {
				this.hbhCard.show = val
			},
			touchmove(e) {
				this.hbhCard.show = false
			},
			longtap(e) {
				this.hbhCard.show = false
			},
			tap(e) {
				this.hbhCard.show = false
			},
			clickItem(val) {
				console.log(val)
			},
			touchmoveBtn(e) {
				this.btnTop = e.touches[0].clientY
				this.btnLeft = e.touches[0].clientX
			},
			touchendBtn(e) {
				if ((e.changedTouches[0].clientX) >= (this.clientWidth / 2)) {
					this.btnLeft = this.clientWidth - 60
					this.elfRight = 0;
				} else {
					this.btnLeft = 20
					this.elfRight = 40
				}
				if (e.changedTouches[0].clientY >= (this.clientHeight - 150)) {
					this.btnTop = this.clientHeight - 150
					return
				}
				if (e.changedTouches[0].clientY <= 150) {
					this.btnTop = 150
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		height:100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #FFE8C2 0%, #f5f5f5 100%);

		.fixedBtn {
			height: 50px;
			width: 40px;
			position: fixed;
			z-index: 1000;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 40px;
				height: 40px;
			}

			text {
				height: 10px;
				font-size: 6px;
				color: #000;
			}

			.closeBox {
				position: absolute;
				top: 0;
				transform: translate(10px, -20px);
				width: 20px;
				height: 20px;
				background-image: url("/static/image/homeImage/cross.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
	}
</style>